<template>
  <div class="dashboard-cards">
    <div class="dashboard-card">
      <div class="card-header">
        <div class="card-icon users">
          <el-icon><User /></el-icon>
        </div>
        <div>
          <div class="card-title">总用户数</div>
          <div class="card-value">12,856</div>
        </div>
      </div>
      <div class="card-footer">
        <el-icon><Top /></el-icon>
        较上月增长 12.5%
      </div>
    </div>

    <div class="dashboard-card">
      <div class="card-header">
        <div class="card-icon orders">
          <el-icon><Tickets /></el-icon>
        </div>
        <div>
          <div class="card-title">订单总数</div>
          <div class="card-value">8,492</div>
        </div>
      </div>
      <div class="card-footer">
        <el-icon><Top /></el-icon>
        较上月增长 8.3%
      </div>
    </div>

    <div class="dashboard-card">
      <div class="card-header">
        <div class="card-icon revenue">
          <el-icon><Money /></el-icon>
        </div>
        <div>
          <div class="card-title">总收入</div>
          <div class="card-value">¥ 2,856,400</div>
        </div>
      </div>
      <div class="card-footer">
        <el-icon><Top /></el-icon>
        较上月增长 15.2%
      </div>
    </div>

    <div class="dashboard-card">
      <div class="card-header">
        <div class="card-icon activity">
          <el-icon><DataLine /></el-icon>
        </div>
        <div>
          <div class="card-title">活跃用户</div>
          <div class="card-value">5,342</div>
        </div>
      </div>
      <div class="card-footer">
        <el-icon><Top /></el-icon>
        较上月增长 6.7%
      </div>
    </div>
  </div>

  <div class="recent-activity">
    <h2 class="section-title">最近活动</h2>
    <ul class="activity-list">
      <li class="activity-item">
        <div class="activity-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="activity-content">
          <div class="activity-title">新用户注册</div>
          <div class="activity-desc">用户 "张明" 刚刚注册了账号</div>
          <div class="activity-time">10分钟前</div>
        </div>
      </li>
      <li class="activity-item">
        <div class="activity-icon">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="activity-content">
          <div class="activity-title">新订单创建</div>
          <div class="activity-desc">订单 #ORD-2023-8765 已创建</div>
          <div class="activity-time">35分钟前</div>
        </div>
      </li>
      <li class="activity-item">
        <div class="activity-icon">
          <el-icon><ChatDotRound /></el-icon>
        </div>
        <div class="activity-content">
          <div class="activity-title">新评论</div>
          <div class="activity-desc">用户 "李华" 对产品 P-234 发表了评论</div>
          <div class="activity-time">1小时前</div>
        </div>
      </li>
      <li class="activity-item">
        <div class="activity-icon">
          <el-icon><Goods /></el-icon>
        </div>
        <div class="activity-content">
          <div class="activity-title">产品更新</div>
          <div class="activity-desc">产品 "智能手表 Pro" 已更新库存</div>
          <div class="activity-time">2小时前</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  setup(){
     const router = useRouter()
     console.log("useRouter===>",router.getRoutes())
  }
}
</script>

<style scoped>

</style>